<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item :to="{ path: '/exam/question/add' }">试题列表-新增试题</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="trr">
                <el-descriptions direction="vertical" :column="4" border
                    style="height: 100%; margin: 15px;margin-top: 15px;" v-loading="loading">
                    <el-descriptions-item label="题干" :span="4">
                        <div style="border: 1px solid #ccc;">
                            <Toolbar style="height: 50px;border-bottom: 1px solid #ccc" :editor="editor"
                                :defaultConfig="toolbarConfig" :mode="mode" />
                            <Editor style="height: 300px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig"
                                :mode="mode" @onCreated="onCreated" />
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="类型" label-class-name="my-label" class-name="my-content">
                        <el-select style="width:50vh;" v-model="value" class="m-2" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :value="item.value" />
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="等级" :span="2">
                        <el-input-number style="width: 50vh;" v-model="lv" :max=999 :min=1 label="输入等级">
                        </el-input-number>
                    </el-descriptions-item>

                    <el-descriptions-item label="标签" :span="4" width="150px" align="left">
                        <el-checkbox style="width: 10vh;" @change="(val) => check(val, item)"
                            v-for="(item, index) in checkList" :key="index" :label="item">
                            {{ item }}
                        </el-checkbox>
                    </el-descriptions-item>

                    <el-descriptions-item label="选项" :span="4">
                        <p style="float:right;margin-top:-10px;">
                            <el-button type="warning" plain @click="add"
                                :disabled="Numbe.length == 6 ? true : false">追加</el-button>
                            <el-button type="danger" plain @click="del"
                                :disabled="Numbe.length < 3 ? true : false">移除</el-button>
                        </p>
                        <div :key="index" v-for="(item, index) in Numbe">
                            <el-tag style="margin-top: 10px;">
                                选项{{ index + 1 }}
                            </el-tag>
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="item.content">
                            </el-input>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="答案" :span="4">
                        <el-row>
                            <el-col :span="12">
                                <el-checkbox @change="(val) => box(val, item, index)" :key="index" :disabled="item.disabled"
                                    v-for="(item, index) in Numbe" v-model="item.isRight" label="选项">
                                    选项{{ index + 1 }}
                                </el-checkbox>
                            </el-col>
                            <el-col :span="1" :offset="11">
                                <el-checkbox @change="AllBox" v-model="values" label="选项">多选</el-checkbox>
                            </el-col>
                        </el-row>
                    </el-descriptions-item>
                    <el-descriptions-item label="操作">
                        <el-button type="primary" @click="AddQuestion" plain>新增</el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetLabels, AddQuestions } from '../../../api/question/question'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';


export default defineComponent({
    components: { Editor, Toolbar },
    setup() {
        const router = useRouter();

        const data = reactive({
            lv: 1,           //等级
            isBan: -1,      // 禁用 
            isPublish: -1,  // 发布 
            index: 0,       // 多少条数据 
            loading: true,   // 加载屏 
            value: '',    //下拉框
            values: false,    //答案
            checkList: [],  //查询标签
            tables: [],      //获取标签
            Numbe: [
                { content: '', isRight: false, disabled: false }, { content: '', isRight: false, disabled: false }
            ],


            // Editor  Toolbar属性
            options: [{ value: '选择题' }, { value: '简答题' }],
            editor: null,
            html: '', //文本
            toolbarConfig: {},
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        })

        const events = {
            goBack() {
                window.history.go(-1)
            },

            onCreated(editor: any) {
                data.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            },

            //标签控件
            check(val: any, item: any) {
                if (val == false) {
                    data.tables.splice(item, 1)
                } else {
                    data.tables.push(item)
                }
            },

            //答案选项box
            box(val: any, item: any, index: any) {
                console.log(val, item, index)
                if (data.values == true) {

                } else {
                    data.Numbe.forEach(na => {
                        na.isRight = false
                    })
                    item.isRight = true
                }
            },

            //新增试题
            AddQuestion() {
                data.Numbe.forEach(na => {
                    if (na.isRight == true) {
                        na.isRight = 1
                    } else if (na.isRight == false) {
                        na.isRight = 0
                    }
                })
                var type = 0
                if (data.value = "选择题") {
                    type = 1
                } else {
                    type = 2
                }
                AddQuestions([{
                    answer: "",
                    subject: "",
                    content: data.html,
                    labels: data.tables,
                    lv: data.lv,
                    options: data.Numbe,
                    type: type
                }]).then((res: any) => {
                    if (res.result == 0) {
                        window.history.go(-1)
                    } else {

                    }
                    console.log(res)
                })
            },


            //多选
            AllBox(val: any) {
                if (val == false) {
                    data.Numbe.forEach(na => {
                        na.isRight = false
                    })
                }
            },

            //追加
            add() {
                data.Numbe.push({
                    content: '',
                    isRight: false,
                    disabled: false
                })
            },

            //移除
            del() {
                data.Numbe.pop()
            },

            // 获取标签
            GetLabel() {
                GetLabels({}).then((res: any) => {
                    if (res.result == 0) {
                        data.checkList = res.data
                        data.loading = false
                    }
                })
            },

            //查询题目
            bind() {
                data.loading = false
            }

        }

        onMounted(() => {
            events.GetLabel()
            events.bind()
        })

        return {
            ...toRefs(data),
            ...events
        }

    },
})
</script>

<style scoped>
/* 背景 */
.tab {
    /* background-color: rgb(239, 240, 242); */
    padding: 1vh;
    border-radius: 5px;
    margin-top:-1vh ;
}

/* 按钮样式 */
.grid-content {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    background-color: rgb(251, 251, 251);
    width: 99%;
    line-height: 45px;
    text-align: left;
    padding: 10px;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 2px grey;
}

.flex {
    float: right;
}

.trr {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    padding: 10px;
    width: 99%;
    background-color: rgb(251, 251, 251);
    box-shadow: 0px 0px 2px grey;
}
</style>